<div id="api-doc" *ngIf="doc && api && env.dubboEnvs">
    <div id="api-header">
        <h2 [class.deprecated]="api?.deprecated">
            <span class="api-type">DUBBO</span>
            {{api?.name}}
        </h2>
        <div class="position-right">
            <a class="api-call-link mr-1" [routerLink]="['/doc', doc.artifact.id, 'invoke-log']" [queryParams]="{apiKey: api.key}">调用日志</a>
            <a class="api-call-link" [routerLink]="['/doc', doc.artifact.id, api.key]">返回文档</a>
        </div>
    </div>

    <div class="api-doc-item">
        <blockquote class="api-desc" *ngIf="api?.comment" [innerHTML]="api.comment|desc|safeHtml"></blockquote>
    </div>

    <div class="api-doc-item">
        <h3>接口定义</h3>
        <markdown [data]="api|dubboApi"></markdown>
    </div>

    <div class="api-doc-item position-relative">
        <h3>请求</h3>
        <div class="position-right">
            <span class="tips">当前可用的请求参数配置&rarr;</span>
            <app-selector name="demo" *ngIf="demos && api?.requestParams" [options]="demos" keyName="id" textName="name" (selected)="selectDemo($event)"></app-selector>
            <button class="btn mr-1" title="删除当前调用参数" *ngIf="data && data.id" (click)="deleteInvokeConf()">
                <i class="material-icons">delete_forever</i>
                删除当前配置
            </button>
            <app-selector name="env" [options]="envOpts" keyName="id" textName="text" [values]="[data.envCode]" (selected)="selectEnv($event)"></app-selector>
            <button class="btn primary-btn mr-1" (click)="invoke()">
                <i class="material-icons" id="send-btn" title="调用Dubbo" (click)="invoke()">send</i>
                Send
            </button>
            <button class="btn" (click)="showSaveDialog=true">
                <i class="material-icons" id="save-btn" title="保存请求参数">save</i>
                Save
            </button>
        </div>
        <app-invoke-request-param-list [param]="data"></app-invoke-request-param-list>
    </div>

    <div class="api-doc-item">
        <app-invoke-response *ngIf="invokeResult" [invokeResult]="invokeResult" [response]="response"></app-invoke-response>
    </div>
</div>

<app-pop-dialog
    *ngIf="showSaveDialog"
    [id]="'invoke-save-dialog'"
    [dialogDisplay]="showSaveDialog"
    [header]="'接口参数保存'"
    (dialogDisplayChange)="showSaveDialog=$event"
    [footerBtns]="footerBtns"
    [closeType]="2"
    [width]="40"
    [height]="18"
>
    <div class="row">
        <div class="col col-2 align-right"><strong>名称：</strong></div>
        <div class="col col-10"><input type="text" class="input" [(ngModel)]="data.name" placeholder="请输入一个浅显易懂的名称"></div>
    </div>
    <div class="row">
        <div class="col col-2 align-right"><strong>公开：</strong></div>
        <div class="col col-10">
            <label *ngFor="let publishState of publicStates">
                <input type="radio" [(ngModel)]="data.publicState" name="publishState" [value]="publishState.value">
                {{publishState.text}}
            </label>
            (公开后，别人也可以直接使用你的配置)
        </div>
    </div>
</app-pop-dialog>
